<template>
  <div class="wrap-box">
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">理财转换</x-header>
    <div class="out-product">转出产品</div>
    <div class="out-product-detail">
      <div class="product-name">{{repord.OutPrdName}}(债券型)</div>
      <div class="product-digital">
        <span>{{repord.OutNetValue}}</span>
        <span>{{repord.OutConvertibleShares}}</span>
        <span>{{repord.OutMarketValue}}</span>
      </div>
      <div class="product-text">
        <span>净值</span>
        <span>可转份额</span>
        <span>市值</span>
      </div>
    </div>
    <div class="out-product">转入产品</div>
    <div class="out-product-detail">
      <div class="product-name">{{repord.InputName}}(债券型)</div>
      <div class="product-digital">
        <span>{{repord.InNetValue}}</span>
        <span>{{repord.InConvertibleShares}}</span>
      </div>
      <div class="product-text">
        <span>净值</span>
        <span>可转份额</span>
      </div>
    </div>
    <div class="product-detail">
      <div style="border-bottom:1px solid #EAEAEA; padding-right: .3rem;">
        <span>转换份额</span>
        <span>{{repord.ConvertShare}}份</span>
      </div>
      <div style="border-bottom:1px solid #EAEAEA; padding-right: .3rem;">
        <span>转换市值</span>
        <span>{{repord.TransformValue}}</span>
      </div>
      <div>
        <span>短信验证码</span>
        <input style='color:#CCCCCC;border:none;width:2rem;outline:none;' placeholder="输入短信验证码"/>
        <input type="button" @click="getNoteCode(this)" class="get-note-code" value="获取验证码"/>
      </div>
    </div>
    <div class="confirm-btn" @click="gotoHome()">确定</div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data () {
    return {
      repord: {
        OutPrdName: '',
        OutNetValue: '',
        OutConvertibleShares: '',
        OutMarketValue: '',
        InputName: '',
        InNetValue: 0,
        InConvertibleShares: '',
        ConvertShare: '',
        TransformValue: ''
      },
      success: '0'
    }
  },
  methods: {
    gotoHome: function () {
      this.$router.push({name: 'FinancialTransformResult'})
    },
    getNoteCode: function (obj) {
      alert('getNoteCode')
    },
    refreshTest: function () {
      let l_vm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'FinancialTransformNoteVerify', 'user_Data': {'CurrencyType': '014', 'CapitalPrd': '0'}}}),
        function (response) {
          l_vm.success = response.data.status
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            l_vm.repord = response.data.data[0]
          } else {
            console.log('fail')
          }
        }
      )
    }
  },
  created () {
    this.refreshTest()
  }
}
</script>

<style scoped>
.wrap-box{
  width:100%;
  height:100%;
  background-color: #F7F8FA;
}
.out-product{
  height: 1rem;
  line-height: 1rem;
  padding-left: .3rem;
  font-size: .2rem;
  font-weight: bold;
  color: #333333;
}
.out-product-detail{
  padding-left: .3rem;
  padding-bottom: .36rem;
  background-color: #FFFFFF;
}
.product-name{
  padding-top: .32rem;
  margin-bottom: .32rem;
  font-size: .27rem;
  color: #333333;
}
.product-digital{
  font-size: .3rem;
  text-align: left;
  font-weight: bold;
}
.product-digital>span{
  display:inline-block;
  width:32%;
  color:#333333;
}
.product-digital>span:nth-of-type(1){
  color: #FF6633;
}
.product-text{
  font-size: .26rem;
  text-align: left;
}
.product-text>span{
  display:inline-block;
  width:32%;
  color: #999999;
}
.product-detail{
  background-color: #FFFFFF;
  color: #333333;
  margin-top: .19rem;
  margin-bottom: .65rem;
  padding-left:.3rem;
  font-size: .28rem;
}
.product-detail>div{
  height: .88rem;
  line-height: .88rem;
}
.product-detail div>span{
  display: inline-block;
}
.product-detail div>span:nth-of-type(1){
  width: 28%;
}
.product-detail div>span:nth-of-type(2){
  width: 70%;
  text-align: right;
}
.get-note-code{
  height: .88rem;
  color: rgb(51, 51, 255);
  float: right;
  font-size: 0.28rem;
  margin-right: 0.3rem;
  border: none;
  outline: none;
  background-color: #fff;
  border-left: #EAEAEA solid 1px;
}
.confirm-btn{
  width: 6.9rem;
  height: .88rem;
  margin: 0 auto;
  background-color: #EC1B30;
  color:#FFFFFF;
  font-size:.34rem;
  line-height: .88rem;
  text-align: center;
  border-radius: .06rem;
}
</style>
